<template>
  <div class="Product">
    <div class="top">
      <img src="@/assets/qiantu.png" alt="" />
    </div>
    <div class="ProContainer">
      <div class="Ptop">
        <div class="left">
          <div class="LTop">{{ prize.name }}</div>
          <div class="LBottom">
            <div class="money">{{ prize.grand }}</div>
          </div>
        </div>
        <div class="right">
          <img :src="prize.url" alt="" />
        </div>
      </div>
      <!-- <div class="Pbottom" v-show="prize.disabled && this.$store.state.showFlag"> -->
      <div class="Pbottom">
        <div>
          <!-- 倒计时 -->
          <el-button
            class="btnStart"
            :class="{ btnDisabled: !this.$store.state.showFlag }"
            :disabled="!this.$store.state.showFlag"
            @click="btnClick(prize)"
            >开始抽奖 {{ number ? number : '' }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="Mp">
      <MpAudio ref="MpAudio" :prize="prize"></MpAudio>
    </div>
  </div>
</template>
<script>
import MpAudio from './audio.vue'
export default {
  components: { MpAudio },
  props: {},
  data() {
    return {
      Stimer: null,
      number: 0,
      setTime: null,
      prize: localStorage.getItem('firstPrize')
        ? JSON.parse(localStorage.getItem('firstPrize'))
        : {
            id: 1,
            name: '文记星兔儿爷礼盒',
            winPrize: [],
            grand: '五等奖',
            disabled: false,
            url: require('@/assets/05-01.png'),
            size: 5
          }
    }
  },
  computed: {},
  methods: {
    btnClick(item) {
      this.$refs.MpAudio.playAndStop()
      if (!this.$store.state.showFlag) {
        this.$message.error('正在抽奖')
      }
      this.$emit('startCheck', item)
      this.number = item.size
      this.$store.commit('setShowFlag')
      // 什么鬼
      this.$store.commit('setInterFlag', true)

      window.clearInterval(this.setTime)
      this.setTime = setInterval(() => {
        this.number--
        if (this.number === 0) {
          window.clearInterval(this.setTime)
        }
      }, 1000 * 3)
      if (this.Stimer) {
        window.clearTimeout(this.Stimer)
      }
      this.Stimer = setTimeout(() => {
        this.$refs.MpAudio.playAndStop()
        this.$store.commit('setInterFlag', false)
        window.clearTimeout(this.Stimer)

        this.Stimer = null
      }, item.size * 1000 * 3)
    }
  }
}
</script>
<style scoped lang="scss">
.Product {
  .Mp {
    text-align: center;
  }
  caret-color: transparent;
  .top {
    text-align: center;
    margin-top: 16px;

    img {
      width: 248px;
      height: 90px;
    }
  }

  .ProContainer {
    background-image: url('@/assets/xiangqing-bg.png');
    background-repeat: no-repeat;
    // width: 570px;
    height: 470px;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;

    .Ptop {
      margin-left: 40px;
      display: flex;
      padding-top: 100px;

      .left {
        // margin-top: 120px;
        height: 200px;
        margin-left: 40px;
        .LTop {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          background: linear-gradient(0deg, #d50100 0%, #fe3d19 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          width: 210px;
          line-height: 25px;
          padding-left: 11px;
        }

        .LBottom {
          background-image: url('@/assets/jiage.png');
          background-repeat: no-repeat;
          /* 不平铺。图片只展示一次。 */
          width: 150px;
          height: 75px;
          -moz-background-size: 100% 100%;
          background-size: 100% 100%;
          // line-height: 75px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 30px;

          .value {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #db1410;
            display: inline-block;
          }

          .money {
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #db1410;
            margin-left: 5px;
          }
        }
      }

      .right {
        margin-left: 17px;

        img {
          width: 200px;
        }
      }
    }

    .Pbottom {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);

      .btnStart {
        background-color: transparent;
        border: none;
        font-size: 30px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #fedb99;
      }
      .btnDisabled {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
</style>
